<style lang="scss" scoped>
#tree {
    width: 210px;
    height: calc(100% - 140px);
    background: #fff;
    border-right: 1px solid #f2f2f2;
    float: left;
    .tree-tip {
        height: 40px;
        line-height: 40px;
        background: rgb(228, 228, 228);
        color: #00799e;
        text-align: center;
        font-size: 13px;
        font-weight: 700; 
    }
    .tree-content {
        width: 100%;
        height: calc(100% - 40px);
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0 10px;
        .tree-title {
            font-size: 16px;
            font-weight: 700;
            color: #333;
            height: 40px;
            line-height: 40px;
        }
    }
}
</style>
<template>
    <div id="tree">
        <p class="tree-tip">药物分类</p>
        <div class="tree-content">
            <!-- <div v-for="(item,index) in data" :key="index">
                <p class="tree-title">{{item.name}}</p> -->
                <el-tree ref="tree" node-key="id" :data="data" :props="defaultProps" @node-click="handleNodeClick" :default-expanded-keys="defaultArray" :default-expand-all="false" :highlight-current="true"></el-tree>
            <!-- </div> -->
        </div>
    </div>
</template>
<script>
import { medicine } from "api/index.js";
export default {
    name: "tree",
    data() {
        return {
            id: 1,
            orginData: [],
            defaultArray:[], //默认展开的数组
            data: [],
            defaultProps: {
                children: "children",
                label: "name"
            }
        };
    },
    methods: {
        handleNodeClick(data) {
            if (data.children) {
                if (data.children.length > 0) {
                    return;
                } else {
                    this.$message.error("暂无该药品信息");
                    this.$refs.tree.setCurrentKey(this.$store.state.searchId);
                    return;
                }
            } else {     
                this.$store.state.searchId = data.id;
                sessionStorage.setItem("searchId", data.id);
                this.$store.state.searchType = this.$store.state.searchType ? this.$store.state.searchType : 1;
                var path = this.getPath();
                this.$router.push(path);
            }
        },
        getPath(){
            var path = null;
            switch(this.$store.state.searchType){
                case 1:
                    path="/basic";
                    break;
                case 2:
                    path="/instructions";
                    break;
                case 3:
                    path="/genomics";
                    break;
                case 4:
                    path="/interaction";
                    break;
                case 5:
                    path="/clinicalTrial";
                    break;
                default:
                    path="/basic";
                    break;
            }
            return path;
        },
        //获取树型数据
        getTreeList() {
            let obj = {};
            medicine.getTree(obj).then((data) => {
                if (data.status == 200 && data.data && data.data.length > 0) {
                    this.orginData = data.data;
                    this.getTreeData();
                    if(this.$store.state.searchId){
                        this.defaultArray = [];
                        this.defaultArray.push(this.$store.state.searchId);
                        this.$nextTick(()=>{
                            this.$refs.tree.setCurrentKey(this.$store.state.searchId);  
                        })
                    }else{
                        if(this.data && this.data.length>0){
                            this.defaultArray.push(this.data[0].id);
                        }
                    }
                  
                } else {
                     this.$message.error(data.msg);
                }
            }).catch(error => {
                this.$message.error("药品列表失败");
            });
        },
        //创建树形结构
        getTreeData() {
            for (var i = 0; i < this.orginData.length; i++) {
                this.data.push(this.creatData(this.orginData[i]));
            }
        },
        creatData(obj) {
            var drugObj = {};
            drugObj.id = obj.id+"f";
            drugObj.name = obj.name;
            drugObj.children = [];
            if (obj.drugClassifications && obj.drugClassifications.length > 0) {
                for (var i = 0; i < obj.drugClassifications.length; i++) {
                    drugObj.children.push(this.creatData(obj.drugClassifications[i]));
                }
            } else {
                if (obj.drugs.length == 0) {
                    drugObj.children = [];
                } else {
                    for (var k = 0; k < obj.drugs.length; k++) {
                        drugObj.children.push(this.getDrugData(obj.drugs[k]));
                    }
                }
            }
            return drugObj;
        },
        getDrugData(obj) {
            var ret = {};
            ret.id = String(obj.id);
            ret.drugId = obj.drugId;
            ret.name = obj.chName;
            ret.drugName = obj.drugName;
            ret.drugType = obj.drugType;
            ret.pmid = obj.pmid;
            return ret;
        }
    },
    mounted() {
        this.getTreeList();
    },
    watch: {
        "$store.state.searchId": function(val) {
            this.defaultArray = [];
            this.defaultArray.push(this.$store.state.searchId);
            this.$nextTick(()=>{
                this.$refs.tree.setCurrentKey(this.$store.state.searchId);  
            })
        }
    }
};
</script>


